<script setup>
import IconsLoading from '@/components/icons/Loading.vue'
import imgLoginBg from '@/assets/images/login-bg.jpg'
import { userApi } from '@/api'
import { useRequest } from '@/hooks/request'
import { EnRsa, LETTER_OR_NUMBER_OR___REG } from '@/utils'
import { useUserStore } from '@/stores'

const router = useRouter()
const userStore = useUserStore()

const ruleForm = ref({
  loginName: '',
  loginPwd: ''
})
const rules = {
  loginName: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'change'
    },
    {
      pattern: LETTER_OR_NUMBER_OR___REG,
      message: '账号只能由字母、数字、下划线组成',
      trigger: 'blur'
    }
  ],
  loginPwd: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change'
    },
    {
      min: 6,
      message: '密码不能少于6位',
      trigger: 'blur'
    }
  ]
}
const ruleFormRef = ref(null)

const { execute, data, isLoading } = useRequest(userApi.login)
async function handleSubmit() {
  await ruleFormRef.value.validate()
  await execute({
    loginName: EnRsa(ruleForm.value.loginName),
    loginPwd: EnRsa(ruleForm.value.loginPwd)
  })
  userStore.setToken(data.value)
  await userStore.getAndSetUser()
  router.push('/user/list')
}
</script>

<template>
  <div
    class="flex min-h-screen flex-col items-center"
    :style="{ background: `url(${imgLoginBg}) left top / cover no-repeat` }"
  >
    <div class="mx-auto my-auto w-full max-w-sm justify-self-center">
      <div class="-mt-24 mb-10 flex items-center justify-center gap-x-1">
        <img src="@/assets/images/logo.png" alt="" class="h-6 w-6" />
        <span class="text-lg font-semibold text-gray-900">虚线体育</span>
      </div>

      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        size="large"
        @submit.prevent="handleSubmit"
      >
        <el-form-item label="账号" prop="loginName">
          <el-input v-model="ruleForm.loginName" />
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd">
          <el-input v-model="ruleForm.loginPwd" show-password />
        </el-form-item>
        <el-form-item>
          <button
            type="submit"
            :disabled="isLoading"
            class="btn-grad block w-full rounded-lg text-center text-white"
            @submit="handleSubmit"
          >
            <span v-if="isLoading" class="inline-flex items-center gap-x-2">
              <IconsLoading class="h-4 w-4 animate-spin text-white" />

              登录中...
            </span>
            <span v-else class="z-20 font-semibold"> 登 录 </span>
          </button>
        </el-form-item>
      </el-form>
      <!-- <p class="text-center">
        <el-link type="info" @click="router.push('/forget-password')">
          忘记密码？
        </el-link>
      </p> -->
    </div>

    <!-- <div class="mb-10">
      <p class="text-sm">
        没有账号？
        <el-link type="info" @click="router.push('/sign-in')">立即注册</el-link>
      </p>
    </div> -->
  </div>
</template>

<style scoped lang="postcss">
:deep(.el-form-item__label) {
  @apply font-semibold text-gray-900;
}

:deep(.el-input__wrapper) {
  @apply rounded-md;
}

.btn-grad {
  background-image: linear-gradient(
    to right,
    #232526 0%,
    #414345 51%,
    #232526 100%
  );
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
}

.btn-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
</style>
